<style scoped>
.el-main {
    margin: 0 auto;
    width: 1500px;
}
</style>
<template xmlns:el-col="http://www.w3.org/1999/html">
    <div class="common-layout">
        <el-container>
            <el-main>
                <div style="width: 600px;height: 500px;background:#e4eaee">
                    <h5 style="padding: 5px 0px 0px 10px">个人基本资料</h5>
                    <img :src="`http://127.0.0.1:8081/avatar/${avatars}`"
                         style="width: 75px;height: 70px;border-radius: 50%;background: black;margin:-30px 0px 20px 260px">
                    <el-form :model="form" label-width="120px" style="width: 500px">
                        <el-form-item style="margin-top: -15px;margin-left: 140px">
                            <el-upload
                                    v-model:file-list="fileList"
                                    :auto-upload="false"
                                    :limit="1"
                            >
                                <el-button size="small">修改头像</el-button>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="form.username"/>
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input v-model="form.telephone"/>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="form.email"/>
                        </el-form-item>
                        <el-form-item label="生日">
                            <el-input v-model="form.birthday"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="Update">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

import {onMounted, ref, reactive, toRaw} from 'vue'
import {ElMessageBox, ElTable} from 'element-plus'
import goodApi from '../../api/userApi.js'
import axios from 'axios'
import router from '../../router/index.js'
import {ElMessage} from "element-plus";
import userApi from "../../api/userApi.js";

const mouth = ref()
const year = ref()
const day = ref()
const weeks = ref()
const days = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
]
const week = ref('')
onMounted(() => {
    getCurrenTime()
    UserMessage()
})


function getCurrenTime() {
    const now = new Date();
    year.value = now.getFullYear();
    mouth.value = now.getMonth() + 1;
    day.value = now.getDate();
    weeks.value = now.getDay();
    week.value = days[weeks.value]
}

console.log(week)

const form = reactive({
    username: '',
    email: '',
    telephone: '',
    birthday: '',
    avatar: ''

});
const avatars = ref('')
const UserMessage = () => {
    axios.get('http://127.0.0.1:8080/user/queryById').then(res => {
        form.username = res.data.username
        avatars.value = res.data.avatar
        form.telephone = res.data.telephone
        form.email = res.data.email
        form.birthday = res.data.birthday
    }).catch(error => {
        console.log(error)
    })
}
const fileList = ref([])
const type = {type: 'application/json'}
const Update = async () => {
    form.files = fileList;
    form.file = form.files[0].raw;
    form.user = new Blob([JSON.stringify(toRaw(form))], type)
    const res = await userApi.modify(form)
    if (res) {
        alert("编辑成功")

    }
    UserMessage()
    router.go(0)
}
</script>
